<template>
  <div class="dataList">
    <div>
      <el-icon size="16">
        <List />
      </el-icon>
      数据列表
    </div>
    <div>
      <el-button @click="showFlashEdit = true">添加</el-button>
    </div>
  </div>
  <el-table :data="list" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="80%" />
    <el-table-column prop="name" label="秒杀时间段名称" />
    <el-table-column label="每日开始时间">
      <template #default="{ row }">
        {{ formateDate(row.startTime) }}
      </template>
    </el-table-column>
    <el-table-column label="每日结束时间">
      <template #default="{ row }">
        {{ formateDate(row.endTime) }}
      </template>
    </el-table-column>
    <el-table-column label="启用" width="200%">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          class="ml-2"
          :active-value="1"
          :inactive-value="0"
          @change="changeFn(row)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180%">
      <template #default="{ row }">
        <el-button text type="primary" @click="editList(row.id)"
          >编辑</el-button
        >
        <el-button text type="primary" @click="deleteFn(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <FlashEditSession
    :show="showFlashEdit"
    @close="closeFn"
    :id="editId"
    @updateList="getFlashSessionList"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import FlashEditSession from "./components/FlashEditSession.vue";
import {
  delFlashSessionApi,
  getFlashTimeListApi,
  changeFlashTimeListApi,
} from "./api";
import { formateDate } from "@/utils";
import { List } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 显示隐藏编辑添加弹出框
const showFlashEdit = ref(false);
const editId = ref<number>(0);

// 数据列表
let list = ref<IFlashTimeList[]>([]);

//获取数据列表方法
const getFlashSessionList = () => {
  getFlashTimeListApi().then((res) => {
    list.value = res.data;
  });
};
getFlashSessionList();

// 隐藏编辑添加弹出框
const closeFn = () => {
  showFlashEdit.value = false;
  // 清除id区分编辑和添加
  editId.value = 0;
};

// 编辑
const editList = (val: number) => {
  showFlashEdit.value = true;
  editId.value = val;
};

// 删除
const deleteFn = (id: number) => {
  ElMessageBox.confirm("是否确认删除", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确认",
    type: "warning",
  })
    .then(() => {
      delFlashSessionApi(id).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          // useTable里面重新请求刷新列表
          getFlashSessionList();
        }
      });
    })
    .catch(() => {});
};

// 改变启用状态
const changeFn = (row: IFlashTimeList) => {
  ElMessageBox.confirm("是否确认修改状态", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确认",
    type: "warning",
  }).then(() => {
    changeFlashTimeListApi(row.id as number, row.status as 0 | 1).then(
      (res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");

          // 更新列表
          getFlashSessionList();
        } else {
          row.status = row.status === 1 ? 0 : 1;
        }
      }
    );
  });
};
</script>

<style scoped>
.dataList {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.cell) {
  text-align: center;
}
</style>
